#{extends 'general.html' /} #{set title:'Registration' /}
<head>
    <script type="text/javascript">
        function instantValidationUsername(){
            var userName = document.getElementById("username").value;
            
            var RE_USERNAME = /^[\w_.]{5,12}$/;
            
            $.getJSON('@{SignUp.instantUserName()}', {
                'username': userName
            }, function(data){
                if ((data.valid === false && userName !== "")) {
                    document.getElementById("status2").src = "../../../public/images/no.png";
                    document.getElementById("usnm").innerHTML = "The username you have entered is already used.";
                }
                else {
                    if (RE_USERNAME.test(userName) === false) {
                        document.getElementById("status2").src = "../../../public/images/no.png";
                        document.getElementById("usnm").innerHTML = "You must enter a username 5-12. characters long with no spaces.";
                    }
                    else {
                        document.getElementById("status2").src = "../../../public/images/ok.png";
                        document.getElementById("usnm").innerHTML = "";
                    }
                }
            });
            
            
            
            return false;
        }
        
        function instantValidationEmail(){
            var email = document.getElementById("email").value;
            var regularEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            $.getJSON('@{SignUp.instantEmail()}', {
                'email': email
            }, function(data){
                if (data.valid === false) {
                    document.getElementById("status").src = "../../../public/images/no.png";
                    document.getElementById("mail").innerHTML = "The email you have entered is already used.";
                }
                else {
                    if (regularEmail.test(email) === false) {
                        document.getElementById("status").src = "../../../public/images/no.png";
                        document.getElementById("mail").innerHTML = "Please enter a valid email.";
                    }
                    else {
                        document.getElementById("status").src = "../../../public/images/ok.png";
                        document.getElementById("mail").innerHTML = "";
                    }
                }
                
            });
            return false;
        }
        
        function instantCheckPassword(){
            var password = document.getElementById("password").value;
            var confirmPassword = document.getElementById("confirmPassword").value;
            if (password !== confirmPassword && password.length > 0) {
                document.getElementById("pwequalscpw").innerHTML = "";
                document.getElementById("pwnotequalscpw").innerHTML = "Passwords dont match";
                
            }
            else {
                if (password.length > 0) {
                    document.getElementById("pwnotequalscpw").innerHTML = "";
                    document.getElementById("pwequalscpw").innerHTML = "Passwords match";
                }
            }
            
            
        }
    </script>
    <script type="text/javascript">
        function validate(){
        
            var userName = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            var confirmPassword = document.getElementById("confirmPassword").value;
            var fullName = document.getElementById("fullName").value;
            var email = document.getElementById("email").value;
            var address = document.getElementById("address").value;
            var RE_EMAIL = /^(\w+[\-\.])*\w+@(\w+\.)+[A-Za-az]+$/;
            var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
            var regularEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var day = document.getElementById("day").value;
            var month = document.getElementById("month").value;
            var year = document.getElementById("year").value;
            var error = 0;
            var mobile = document.getElementById("mobile").value;
            var RE_NUM = /^(01)[0-9]{8}/;
            
            var dateOfBirth = month.concat("/");
            dateOfBirth = dateOfBirth.concat(day);
            dateOfBirth = dateOfBirth.concat("/");
            dateOfBirth = dateOfBirth.concat(year);
            
            var RE_USERNAME = /^[\w_.]{5,12}$/;
            document.getElementById("usnm").innerHTML ="";
            document.getElementById("cpw").innerHTML ="";
            document.getElementById("pw").innerHTML ="";
            document.getElementById("pwequalscpw").innerHTML = "";
            document.getElementById("pwnotequalscpw").innerHTML = "";
            document.getElementById("mail").innerHTML ="";
            document.getElementById("name").innerHTML = "";
            document.getElementById("dob").innerHTML ="";
            document.getElementById("mobnum").innerHTML ="";
            
            
            if (userName.length === 0 || !(RE_USERNAME.test(userName))) {
                document.getElementById("usnm").innerHTML = "You must enter a username 5-12. characters long with no spaces";
                error = error + 1;
                
            }
			if(confirmPassword.length==0){
				document.getElementById("cpw").innerHTML = "You must enter a username 5-12. characters long with no spaces";
                error = error + 1;
			}
            if (password.length === 0) {
                document.getElementById("pw").innerHTML = "You must enter a password.";
                error = error + 1;
            }
            else {
            
                if (!checkLength(password, 6, 24)) {
                    document.getElementById("pw").innerHTML = "Your password must be 6-24 characters long.";
                    error = error + 1;
                }
            }
            if (password !== confirmPassword && password.length > 0) {
                document.getElementById("pwequalscpw").innerHTML = "";
                document.getElementById("pwnotequalscpw").innerHTML = "Passwords dont match";
                error = error + 1;
                
            }
            else {
                if (password.length > 0) {
                    document.getElementById("pwnotequalscpw").innerHTML = "";
                    document.getElementById("pwequalscpw").innerHTML = "Passwords match";
                }
            }
            
            
            if (email.length === 0) {
                document.getElementById("mail").innerHTML = "You must enter an email.";
                error = error + 1;
            }
            else {
            
                if (regularEmail.test(email) == false) {
                    document.getElementById("mail").innerHTML = "You must enter a valid email address.";
                    error = error + 1;
                }
            }
            if (fullName.length === 0) {
                document.getElementById("name").innerHTML = "You must enter your fullname.";
                error = error + 1;
            }
            if (day.length === 0 || year.length === 0 || month.length === 0) {
                document.getElementById("dob").innerHTML = "You must enter your date of birth.";
                error = error + 1;
            }
            else {
            
                if ((parseInt(day) == NaN) || (parseInt(month) == NaN) || (parseInt(year) == NaN)) {
                    document.getElementById("dob").innerHTML = "You must enter a number for your date of birth.";
                    error = error + 1;
                }
                else {
                    if (!correctDate(month, day, year)) {
                        document.getElementById("dob").innerHTML = "Please enter a valid date of birth.";
                        error = error + 1;
                    }
                }
            }
            
            
            if (address.length === 0) {
                document.getElementById("add").innerHTML = "You must enter your address.";
                error = error + 1;
            }
            
            if (mobile.length !== 10 || !(RE_NUM.test(mobile))) {
                document.getElementById("mobnum").innerHTML = "You must enter a valid mobile number.";
                error = error + 1;
            }
            
            $.getJSON('@{SignUp.instantUserName()}', {
                'username': userName
            }, function(data){
                if ((data.valid == false && userName != "") || !RE_USERNAME.test(userName)) {
                    document.getElementById("status2").src = "../../../public/images/no.png";
                    errors[errors.length] = "The username you have entered is already used.";
                }
                else {
                    document.getElementById("status2").src = "../../../public/images/ok.png";
                }
            });
            $.getJSON('@{SignUp.instantEmail()}', {
                'email': email
            }, function(data){
                if (data.valid == false || !regularEmail.test(email)) {
                    document.getElementById("status").src = "../../../public/images/no.png";
                    errors[errors.length] = "The email you have entered is already used.";
                }
                else {
                    document.getElementById("status").src = "../../../public/images/ok.png";
                }
                
            });
            if (error > 0) {
            
                return false;
            }
            else {
            
            
                $.getJSON('@{SignUp.addUser()}', {
                    'username': userName,
                    'password': password,
                    'fullName': fullName,
                    'eMail': email,
                    'dateOfBirth': dateOfBirth,
                    'address': address,
                    'mobile': mobile
                }, function(data){
                
                    if (data.output == "Congratulations") {
                        alert(data.output);
                        window.location = "http://localhost:9000/secure/login";
                    }
                    else {
                        alert(data.output);
                    }
                });
                
                return true;
            }
            
            return true;
        }
        
        function correctDate(month, day, year){
        
            parseInt(month);
            parseInt(day);
            parseInt(year);
            
            if (year > 1930 && year < 2010) {
            
            
            
            
                if (month == 1) {
                
                    if ((day > 0) && (day < 32)) {
                    
                        return true;
                    }
                    else {
                        return false;
                    }
                }
                else {
                    if (month == 2) {
                        if (day > 0 && day < 30) {
                            return true;
                        }
                        else {
                            return false;
                        }
                    }
                    else {
                        if (month == 3) {
                            if (day > 0 && day < 32) {
                                return true;
                            }
                            else {
                                return false;
                            }
                        }
                        else {
                            if (month == 4) {
                                if (day > 0 && day < 31) {
                                    return true;
                                }
                                else {
                                    return false;
                                }
                            }
                            else {
                                if (month == 5) {
                                    if (day > 0 && day < 32) {
                                        return true;
                                    }
                                    else {
                                        return false;
                                    }
                                }
                                else {
                                    if (month == 6) {
                                        if (day > 0 && day < 31) {
                                            return true;
                                        }
                                        else {
                                            return false;
                                        }
                                    }
                                    else {
                                        if (month == 7) {
                                            if (day > 0 && day < 32) {
                                                return true;
                                            }
                                            else {
                                                return false;
                                            }
                                        }
                                        else {
                                            if (month == 8) {
                                                if (day > 0 && day < 32) {
                                                    return true;
                                                }
                                                else {
                                                    return false;
                                                }
                                            }
                                            else {
                                                if (month == 9) {
                                                    if (day > 0 && day < 31) {
                                                        return true;
                                                    }
                                                    else {
                                                        return false;
                                                    }
                                                }
                                                else {
                                                    if (month == 10) {
                                                        if (day > 0 && day < 32) {
                                                            return true;
                                                        }
                                                        else {
                                                            return false;
                                                        }
                                                    }
                                                    else {
                                                        if (month == 11) {
                                                            if (day > 0 && day < 31) {
                                                                return true;
                                                            }
                                                            else {
                                                                return false;
                                                            }
                                                        }
                                                        else {
                                                            if (month == 12) {
                                                                if (day > 0 && day < 32) {
                                                                    return true;
                                                                }
                                                                else {
                                                                    return false;
                                                                }
                                                            }
                                                            else {
                                                                return false;
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                
                
            }
            else {
                return false;
            }
        }
        
        
        function checkLength(text, min, max){
        
            if (text.length < min || text.length > max) {
                return false;
            }
            return true;
        }
    </script>
    <script type="text/javascript">
        function passwordStrength(password){
        
            var desc = new Array();
            desc[0] = "Very Weak";
            desc[1] = "Weak";
            desc[2] = "Better";
            desc[3] = "Medium";
            desc[4] = "Strong";
            desc[5] = "Strongest";
            
            var score = 0;
            
            if (password.length > 6) 
                score++;
            
            if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) 
                score++;
            
            if (password.match(/\d+/)) 
                score++;
            
            if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) 
                score++;
            
            if (password.length > 12) 
                score++;
            
            document.getElementById("passwordDescription").innerHTML = desc[score];
            document.getElementById("passwordStrength").className = "strength" + score;
            
        }
    </script>
</head>
<body>
    <style>
        .inputHighlighted {
            color: #ff0000;
        }
        
        .passwordsmatch {
            color: #009900
        }
    </style>
    <style>
        #passwordStrength {
            height: 10px;
            display: block;
            float: left;
        }
        
        .strength0 {
            width: 250px;
            background: #cccccc;
        }
        
        .strength1 {
            width: 50px;
            background: #ff0000;
        }
        
        .strength2 {
            width: 100px;
            background: #ff5f5f;
        }
        
        .strength3 {
            width: 150px;
            background: #56e500;
        }
        
        .strength4 {
            background: #4dcd00;
            width: 200px;
        }
        
        .strength5 {
            background: #399800;
            width: 250px;
        }
    </style>
    <div id="content">
        <fieldset>
            <legend>
            </legend>
            <p>
                <label for="name">
                    Full Name: 
                </label>
                <input name="fullName" id="fullName" value="" type="text" "/>
                <span class="inputHighlighted">*</span>
                <span class="inputHighlighted" id="name"></span>
            </p>
            <p>
                <label for="username">
                    Username: 
                </label>
                <input name="username" id="username" value="" type="text" onkeyup="instantValidationUsername()"/><img src="../../../public/images/no.png" alt="Status" width="20" height="20" id="status2" style="margin-left: 5px;"/><span class="inputHighlighted">*</span>
                <span class="inputHighlighted" id="usnm"></span>
            </p>
            <p>
                <label for="password">
                    Password: 
                </label>
                <input name="Password" id="password" value="" type="password" onkeydown="passwordStrength(this.value)"/><span class="inputHighlighted">*</span>
                <span class="inputHighlighted" id="pw"></span>
                <div id="passwordDescription">
                    Password not entered
                </div>
                <div id="passwordStrength" class="strength0">
                </div>
            </p>
            <p>
                <br>
                </br>
                <label for="confirm">
                    Confirm Password: 
                </label>
                <input name="confirmPassword" onkeyup="instantCheckPassword()" id="confirmPassword" value="" type="password" /><span class="inputHighlighted">*</span>
                <span class="inputHighlighted" id="cpw"></span>
                <span class = "passwordsmatch" id = "pwequalscpw"></span>
                <span class="inputHighlighted" id="pwnotequalscpw"></span>
                <p>
                    <label for="email">
                        Email: 
                    </label>
                    <input name="eMail" onkeyup="instantValidationEmail()" id="email" value="" type="text" /><img src="../../../public/images/no.png" alt="Status" width="20" height="20" id="status" style="margin-left: 5px;"/><span class="inputHighlighted">*</span>
                    <span class="inputHighlighted" id="mail"></span>
                </p>
            </p>
            <p>
                <label for="DateOfBirth">
                    Date Of Birth: 
                </label>
                <INPUT TYPE="text" id="month" VALUE="" SIZE=2>/<INPUT TYPE="text" id="day" VALUE="" SIZE=2>/<INPUT TYPE="text" id="year" VALUE="" SIZE=4>(mm/dd/yyyy)<span class="inputHighlighted">*</span>
                <span class="inputHighlighted" id="dob"></span>
            </p>
            <p>
                <label for="address">
                    Address: 
                </label>
                <input name="address" id="address" value="" type="text" /><span class="inputHighlighted">*</span>
                <span class="inputHighlighted" id="add"></span>
            </p>
            <p>
                <label for="mobilenumber">
                    Mobile Number: 
                </label>
                <input name="mobile" id="mobile" value="" type="text" /><span class="inputHighlighted">*</span>
                <span class="inputHighlighted" id="mobnum"></span>
            </p>
            <a href=# onclick="validate()">Sign up </a>
            <br>
            <br>
        </fieldset>
    </div>
</body>
